<!--
 * @Author: guo wei
 * @LastEditors: [guo wei]
 * @LastEditTime: 2023-12-26 21:00:27
 * @Description: 
-->
<template>
  <div class="form-wrap">
    <el-button type="primary" @click="addType">添加分类</el-button>
    <el-form
      ref="form"
      class="border-form"
      :model="form"
      size="large"
      label-position="left"
      label-width="240px"
      :hide-required-asterisk="true"
      @submit.native.prevent
    >
      <el-form-item label="建筑大类：">
        <FormTag :data="buildingTags"></FormTag>
      </el-form-item>
      <el-form-item label="公建分类：">
        <FormTag :data="commonBuildingTags"></FormTag>
      </el-form-item>
    </el-form>
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      v-model="dialogVisible"
      title="添加分类"
      width="30%"
    >
      <div>
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="120px"
          class="demo-ruleForm"
        >
          <el-form-item label="分类名称" prop="name">
            <el-input v-model="ruleForm.name" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmCreateType">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, nextTick } from "vue";
import FormTag from "@/components/EditTag/form-tag.vue";
const form = reactive({});
const dialogVisible = ref(false);
const ruleFormRef = ref();
const ruleForm = reactive({
  name: "",
});
const rules = reactive({
  name: [
    { required: true, message: "请输入分类名称", trigger: "blur" },
    { min: 2, max: 10, message: "字符长度在2-10个字符", trigger: "blur" },
  ],
});
const buildingTags = ref([
  { name: "公建", isEdit: false, editValue: "公建" },
  { name: "住宅/公寓", isEdit: false, editValue: "住宅/公寓" },
]);
const commonBuildingTags = ref([
  { name: "商业", isEdit: false, editValue: "商业" },
  { name: "医疗", isEdit: false, editValue: "医疗" },
  { name: "文化", isEdit: false, editValue: "文化" },
  { name: "办公", isEdit: false, editValue: "办公" },
  { name: "体育", isEdit: false, editValue: "体育" },
  { name: "展览", isEdit: false, editValue: "展览" },
  { name: "旅游", isEdit: false, editValue: "旅游" },
  { name: "教育", isEdit: false, editValue: "教育" },
  { name: "交通", isEdit: false, editValue: "交通" },
]);
const addType = () => {
  dialogVisible.value = true;
};
const confirmCreateType = async () => {
  if (!ruleFormRef.value) return;
  await ruleFormRef.value.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
      dialogVisible.value = false;
    } else {
      console.log("error submit!", fields);
    }
  });
};
</script>
<style lang="scss" scoped>
.border-form {
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  margin-top: 20px;
  :deep .el-form-item {
    border-bottom: 1px solid #e4e7ed;
    margin-bottom: 0px;
    &:last-child {
      border-bottom: none;
    }
    .el-form-item__label {
      border-right: 1px solid #e4e7ed;
      padding: 20px;
      display: flex;
      height: auto;
      align-items: center;
    }
    .el-form-item__content {
      padding: 20px;
      padding-bottom: 5px;
      > * {
        padding: 0 20px;
      }
      .el-form-item__error {
        top: 42px;
      }
      .el-tag {
        margin-left: 15px;
        margin-bottom: 15px;
        vertical-align: middle;
      }
      .button-new-tag {
        margin-left: 15px;
        margin-bottom: 15px;
      }
      .el-input {
        width: auto;
        display: inline-block;
        margin-left: 15px;
        margin-bottom: 15px;
      }
    }
    .el-input__inner {
      margin-bottom: 0px;
    }
  }
}
.form-wrap {
  padding: 20px;
}
</style>
